<template>
	<div class="max home_main">
		<my-header>
			<div slot="title">
				首页
			</div>
			<div slot="right" v-if="custom === 'true'">
				<router-link to="/addChildren">
					注册
				</router-link>
			</div>
		</my-header>
		<div class="cont home_cont">
			<div class="home_block kinsfolk-apply" v-if="custom==='false'">
				<div class="login_name flex">
					<div class="login_avater oh">
						<img :src='kindergarten.logo' alt="" class="max">
					</div>
					<div>
						<template v-if="topText.length<=18">
							{{topText}}
						</template>
						<marquee v-else behavior="" direction="">{{topText}}</marquee>
					</div>
				</div>
				<swiper :options="remindListOption" style="width: 100%;height: 5rem;margin-top: 0.3rem;">
					<swiper-slide v-for="(data, index) in remindList" :key="index" v-if="data.list.length>0">
						<div class="new-apply oh flex" @click="$router.push(data.url)">
							<div class="new-icon pr">
								<img src="../../../static/img/xiaoxi.png">
								<span class="weui-badge new-badge pa">{{data.list.length}}</span>
							</div>
							<div class="apply-text tl">
								您有{{data.list.length}}条{{data.name}}待{{data.txt}}
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
			<div class="home_block tc" v-else style="color: #FF3246;font-size: 1.6rem;">
				注册后方可查看更多功能哦，请进行注册！
			</div>
			<div class="home_block pr">
				<div class="home_title tl">
					我的应用
				</div>
				<div class="pa menu-handle" @click="$router.push('/menuConfig')" v-if="custom==='false'">
					管理
				</div>
				<swiper :options="swiperOption">
					<swiper-slide v-for="(list, index) in menus" :key="index">
						<div v-for="(item,index2) in list" :key="index2" class="fl" style="width: 25%;height: 50%;">
							<div @click="run(item)">
								<div class="home_menu oh icon" :style="'background-color:' + item.color">
									<img :src="item.icon" alt="" style="height:2rem;width:2rem">
								</div>
								<div style="margin-bottom: 1rem;">
									{{item.name}}
								</div>
							</div>
						</div>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination" style="position: static;"></div>
				</swiper>
			</div>
			<div class="home_block oh pr" v-if="isShow(['kinsfolk'])">
				<div class="home_title tl">
					今日晨检
				</div>
				<template v-if="custom==='false'">
					<div class="pa menu-handle" @click="$router.push('/reportList')">
						更多
					</div>
					<div v-for="(item,index) in reportList" :key="index">
						<div class="fl p_total p_total_photo">
							<div class="p_photo" @click="checkPic(item.photo)">
								<img :src="item.photo" class="p_photo">
							</div>
							<div>{{item.studentName}}</div>
						</div>
						<div class="fr p_items p_report tl flex">
							<div>身高：{{item.height}}厘米</div>
							<div>体重：{{item.weight}}公斤</div>
							<div>体温：{{item.temperature}}度</div>
							<div>BMI：{{item.bmi}}</div>
						</div>
					</div>
				</template>
				<div class="weui-loadmore weui-loadmore_line" v-if="custom==='true'||reportList.length===0">
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
			</div>
			<!--暂时隐藏 用k替换kinsfolk-->
			<div class="home_block oh pr" v-if="isShow(['k'])">
				<div class="home_title tl">
					视频监控
				</div>
				<template v-if="custom==='false'">
					<div class="pa menu-handle" @click="$router.push('/camera')">
						更多
					</div>
					<div class="p_video flex">
						<div v-for="(item,index) in cameraList" v-if="index<=2" :key="index" @click="cameraViews(item)">
							<div class="p_video_cover pr">
								<img :src="item.frontCover" class="p_video_cover">
							</div>
							{{item.name}}
						</div>
					</div>
				</template>
				<div class="weui-loadmore weui-loadmore_line" v-if="cameraList.length===0||custom==='true'">
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
			</div>
			<div class="home_block oh pr" v-if="isShow(['kindergarten','kinsfolk'])">
				<div class="home_title tl">
					<template v-if="isShow(['kinsfolk'])">
						宝宝考勤
					</template>
					<template v-else>
						宝宝概况
					</template>
				</div>
				<time-select @onchange="getTime($event,'kids')" :step="1" v-if="access==='kindergarten'" :disabledDate="disabledDate"></time-select>
				<time-select @onchange="getKinsfolkTime($event,'kids')" :step="1" v-if="custom==='false'&&access==='kinsfolk'"
				 :disabledDate="disabledDate"></time-select>
				<div class="pa menu-handle" v-if="custom==='false'" @click="$router.push('/kidsAttendCount')">
					更多
				</div>
				<template v-if="isShow(['kinsfolk'])">
					<template v-if="custom==='false'">
						<div class="oh p_title">
							<div class="fl" style="background-color: #14DBDF;">
								<img src="../../../static/img/icon/ruyuan.png" alt="">
							</div>
							<span class="fl">入园</span>
						</div>
						<table style="width: 100%;font-size: 1.2rem;">
							<tr>
								<td class="stu_td_1">姓名</td>
								<td class="stu_td_1">班级</td>
								<td class="stu_td_1">入园时间</td>
							</tr>
							<tr v-for="(item,index) in enterList" :key="index">
								<td class="stu_td_2">{{item.name}}</td>
								<td class="stu_td_2">{{item.clazzName}}</td>
								<td class="stu_td_2" v-if="item.signTime">{{item.signTime.split(' ')[1]}}</td>
								<td class="stu_td_2" style="color: #FFB300;" v-else>未入园</td>
							</tr>
						</table>
						<div class="oh p_title" style="margin-top: 1.5rem;">
							<div class="fl" style="background-color: #F9CF4E;">
								<img src="../../../static/img/icon/liyuan.png" alt="">
							</div>
							<span class="fl">出园</span>
						</div>
						<table style="width: 100%;font-size: 1.2rem;">
							<tr>
								<td class="stu_td_1">姓名</td>
								<td class="stu_td_1">班级</td>
								<td class="stu_td_1">出园时间</td>
							</tr>
							<tr v-for="(item,index) in outList" :key="index">
								<td class="stu_td_2">{{item.name}}</td>
								<td class="stu_td_2">{{item.clazzName}}</td>
								<td class="stu_td_2" v-if="item.signTime">{{item.signTime.split(' ')[1]}}</td>
								<td class="stu_td_2" style="color: #FFB300;" v-else>未出园</td>
							</tr>
						</table>
					</template>
					<div class="weui-loadmore weui-loadmore_line" v-else>
						<span class="weui-loadmore__tips">暂无数据</span>
					</div>
				</template>
				<template v-if="isShow(['kindergarten'])">
					<div class="fl p_total">
						<div class="p_number"><span class="p_number">{{student.totalStudent}}</span>人</div>
						<div>宝贝总数</div>
					</div>
					<div class="fr p_items">
						<div class="point_green flex">
							<div>家长总数</div>
							<div>{{student.totalKinsfolk}}人</div>
						</div>
						<div class="point_green flex">
							<div>入园人数</div>
							<div>{{student.totalEnter}}人</div>
						</div>
						<div class="point_green flex">
							<div>离园人数</div>
							<div>{{student.totalOuter}}人</div>
						</div>
						<div class="point_red flex">
							<div>请假人数</div>
							<div>{{student.totalStudentLeave}}人</div>
						</div>
					</div>
				</template>
			</div>
			<div class="home_block oh pr" v-if="isShow(['kindergarten','classMaster'])">
				<div class="home_title tl">
					宝宝晨检
				</div>
				<div class="pa menu-handle" @click="$router.push('/reportList')">
					更多
				</div>
				<div class="report oh">
					<div class="point_green fl flex">
						<div>已检人数</div>
						<div>{{student.totalReport}}人</div>
					</div>
					<div class="point_red fr flex">
						<div>未检人数</div>
						<div>{{student.notReport}}人</div>
					</div>
				</div>
			</div>
			<div class="home_block oh pr" v-if="isShow(['kindergarten'])">
				<div class="home_title tl">
					教师概况
				</div>
				<div class="pa menu-handle" @click="$router.push('/teaAttendCount')">
					更多
				</div>
				<time-select @onchange="getTeacherTime($event,'teacher')" :disabledDate="disabledDate"></time-select>
				<div class="fl p_total">
					<div class="p_number"><span class="p_number">{{teacher.total}}</span>人</div>
					<div>在园人数</div>
				</div>
				<div class="fr p_items">
					<div class="point_red flex" v-for="(item,index) in teacher.statics" :key="index">
						<div>{{item.status}}</div>
						<div>{{item.number}}人</div>
					</div>
				</div>
			</div>
			<div class="home_block oh">
				<div class="home_title tl">
					校园动态
				</div>
				<div class="daily" v-for="(item,index) in list">
					<div class="oh up-top">
						<div class="up-avatar oh fl">
							<img :src="item.avatar" width="100%" height="100%">
						</div>
						<div class="up-name fl">
							{{item.publisherName}}
						</div>
						<div class="up-time fr">
							{{item.createTime}}
						</div>
					</div>
					<div class="up-cont tl padding-15">
						{{item.content}}
					</div>
					<div class="up-img tl oh flex padding-15" :class="'up-img-' + item.trendsFiles.length">
						<div v-for="img in item.trendsFiles" class="oh fl" @click="checkPic(img.url)" :style="'background:url(' + img.url + ')no-repeat top center/cover'"></div>
					</div>
					<div class="up-handle padding-15 flex">
						<div @click="handlePraiseFn(item)" v-if="custom==='false'">
							<img class="icon" src="../../../static/img/like_1.png" v-if="!item.selfPraise" height="18px">
							<img class="icon" src="../../../static/img/like_2.png" v-else height="18px">
							<span v-if="item.praiseNumber>0">{{item.praiseNumber}}</span>
						</div>
						<div @click="toShare(item)">
							<img class="icon" src="../../../static/img/forward.png" height="18px">
							<span v-if="item.shareNumber>0">{{item.shareNumber}}</span>
						</div>
						<div @click="deleteTrends(item.id)" v-if="access!=='kinsfolk'&&item.canDelete">
							<img class="icon" src="../../../static/img/del.png" height="18px">
						</div>
						<div @click="converFn(item)" v-if="access==='kindergarten'">
							<img class="icon" src="../../../static/img/notice_a.png" v-if="!item.black" height="18px">
							<img class="icon" src="../../../static/img/hide.png" v-else height="18px">
						</div>
					</div>
					<div class="up-like oh padding-15" v-if="item.praises.length>0">
						<div class="fl">
							<img style="vertical-align: top;" src="../../../static/img/like_2.png" alt="" height="18px">
						</div>
						<div class="fr tl up-like-p">
							{{item.praises.map(praise=>praise.praiseName).join(",")}}
						</div>
					</div>
				</div>
				<div class="shl-title" style="background-color: #36C12D" @click="$router.push('/classDaily')">查看更多</div>
			</div>
			<div class="home_block oh pr" v-if="isShow(['kinsfolk'])">
				<div class="home_title tl">
					校园简介
				</div>
				<div class="pa menu-handle" @click="toShareKindergartenInfoFn(kindergartenInfo.id)">
					转发
				</div>
				<div class="shl-title" style="background-color: #5DC9FF">校园风采</div>
				<div class="shl-info-cont" v-html="kindergartenInfo.kindergartenPhotoDesc?kindergartenInfo.kindergartenPhotoDesc:'暂无内容'"></div>
				<div v-if="kindergartenInfo.kindergartenPhotoList.length>0">
					<div class="p_shl_photo flex">
						<img :src="item.url" @click="checkPic(item.url)" class="p_shl_photo_item" v-if="index<=2" v-for="(item,index) in kindergartenInfo.kindergartenPhotoList"
						 :key="index">
					</div>
				</div>
				<div class="weui-loadmore weui-loadmore_line" v-else>
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
				<div class="shl-title" style="background-color:#14DBDF">师资力量</div>
				<div class="shl-info-cont" v-html="kindergartenInfo.teacherPhotoDesc?kindergartenInfo.teacherPhotoDesc:'暂无内容'"></div>
				<div v-if="kindergartenInfo.teacherPhotoList.length>0">
					<div class="p_shl_photo flex">
						<img :src="item.url" class="p_shl_photo_item" @click="checkPic(item.url)" v-if="index<=2" v-for="(item,index) in kindergartenInfo.teacherPhotoList"
						 :key="index">
					</div>
				</div>
				<div class="weui-loadmore weui-loadmore_line" v-else>
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
				<div class="shl-title" style="background-color: #F9CF4E">校园荣誉</div>
				<div class="shl-info-cont" v-html="kindergartenInfo.kindergartenHonorDesc?kindergartenInfo.kindergartenHonorDesc:'暂无内容'"></div>
				<div v-if="kindergartenInfo.kindergartenHonorList.length>0">
					<div class="p_shl_photo flex">
						<img :src="item.url" class="p_shl_photo_item" @click="checkPic(item.url)" v-if="index<=2" v-for="(item,index) in kindergartenInfo.kindergartenHonorList"
						 :key="index">
					</div>
				</div>
				<div class="weui-loadmore weui-loadmore_line" v-else>
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
				<div class="shl-title" style="background-color: #36C12D;" @click="$router.push('/schoolSituation')">查看更多</div>
			</div>
		</div>
		<div class="weui-mask" v-if="tips.visible">
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
				<div class="weui-dialog__bd">{{tips.content}}</div>
				<div class="weui-dialog__ft">
					<div href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" @click="$router.push(tips.url)">
						去{{tips.ok}}
					</div>
					<div href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="tips.visible=false">取消</div>
				</div>
			</div>
		</div>
		<my-select :option="option" ref="selectFace" @on-change="change"></my-select>
		<my-foot tab="/home"></my-foot>
		<div class="weui-mask share" v-if="share" @click="share=false">
			<div class="share_txt">
				点击右上角分享
			</div>
		</div>
	</div>
</template>

<script>
	import mySwiper from '../Myself/kinsfolk/schoolInfo/my-swiper.vue';
	import myFoot from '@/components/Footer.vue'
	import chart from '@/components/charts.vue'
	import PileChart from '@/components/PileChart.vue'
	import timeSelect from '@/components/timeSelect.vue'
	import wx from "weixin-js-sdk";
	import mySelect from '@/components/select.vue'

	export default {
		components: {
			mySelect,
			myFoot,
			chart,
			PileChart,
			timeSelect,
			mySwiper
		},
		data() {
			return {
				share: false,
				//人脸录入下拉框设置
				option: {
					value: '人脸录入',
					type: 'picker',
					data: [{
						label: '我',
						value: '-1'
					}],
					style: {
						width: "100%",
						textAlign: "center",
						background: 'none',
						padding: 0,
					}
				},
				freePowerRouter: ['/home', '/schoolSituation', '/classDaily', '/announcement'],
				chargeRouter: ['/reportList', '/camera'],
				loginTips: false,
				tips: {
					visible: false,
					content: '该功能未付费功能，需缴费后才能使用',
					url: '/addChildren'
				},
				kindergarten: {
					name: '',
					logo: ''
				},
				remindList: {
					notice: {
						name: '通知公告',
						txt: '查看',
						url: '/announcement',
						list: []
					},
					studentLeave: {
						name: '学生请假',
						txt: '查看',
						url: '/studentLeave',
						list: []
					},
					outApply: {
						name: '离园申请',
						txt: '查看',
						url: '/studentApply',
						list: []
					},
					teacherLeave: {
						name: '教师请假',
						txt: '审核',
						url: '/teacherLeave',
						list: []
					},
					kinsfolkJudge: {
						name: '绑定审核',
						txt: '处理',
						url: '/bindReview',
						list: []
					},
					faceRecord: {
						name: '人脸审核',
						txt: '审核',
						url: '/faceManagement',
						list: []
					}
				},
				menus: [],
				searchTime: this.$getNowDate('date'),
				kidTime: this.$getNowDate('date'),
				disabledDate: this.$getNowDate('date'),
				remindListOption: {
					autoplay: true,
					direction: 'vertical',
					centeredSlides: false,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
				},
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					},
					height: 700,
					centeredSlides: false,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
				},
				school: {},
				menu: 'stu',
				access: this.$Cookies.get('loginType'),
				custom: this.$Cookies.get('custom'),
				reportList: [],
				enterList: [],
				outList: [],
				week: [],
				payStatus: {
					residue: 1
				},
				teacherSearchDay: this.$getNowDate('date'),
				student: {
					totalEnter: 0,
					totalKinsfolk: 0,
					totalOuter: 0,
					totalStudent: 0,
					totalStudentLeave: 0,
					totalReport: 0,
					notReport: 0
				},
				teacher: {
					total: 0,
					statics: [],
				},
				cameraList: [],
				kindergartenInfo: {
					teacherPhotoList: [],
					kindergartenHonorList: [],
					kindergartenPhotoList: [],
				},
				list: [],
			}
		},
		computed: {
			topText() {
				let acs = '';
				if (this.access === 'kinsfolk') acs = '家长';
				else if (this.access === 'kindergarten') acs = '园长';
				else acs = '老师';
				return this.kindergarten.name + '/' + this.$Cookies.get('fullName') + acs
			}
		},
		methods: {
      toShareKindergartenInfoFn(){
        if (!this.kindergartenInfo.id){
          this.$weui.topTips('暂无可分享的简介');
          return;
        }
        let _this=this;
        _this.share = true;
        wx.updateTimelineShareData({
          title: _this.kindergartenInfo.kindergartenName+"幼儿园简介", // 分享标题
          link:"http://"+ window.location.host+"/wechat/share-school?schoolId="+_this.kindergartenInfo.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: _this.kindergartenInfo.logo,
          success: function() {
            // 设置成功
          }
        })
      },
			toShare(trends) {
				this.share = true;
        wx.ready(function() { //需在用户可能点击分享按钮前就先调用
          wx.updateTimelineShareData({
            title: "校园动态分享", // 分享标题
            link:"http://"+ window.location.host+"/wechat/share-trends?id="+trends.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: trends.avatar,
            success: function() {
              // 设置成功
            }
          })
        });
			},
			cameraViews(item) {
				let url = item.url;
				if (url.indexOf('.m3u8') === -1) {
					url = url.substring(0, url.lastIndexOf(".")) + '.m3u8';
				}
				this.$router.push({
					path: 'live-play',
					query: item
				})
			},
			change(item) { //下拉框选择
				let obj = item[0];
				let loginType = 'student';
				if (obj.label === '我') {
					loginType = 'kinsfolk';
				}
				this.$router.push({
					path: '/photograph',
					query: {
						id: item[0].value,
						loginType: loginType
					}
				})
			},
			getStuInfo() {
				this.$http.fetchMyStudent().then(resp => {
					let cList = resp.data.students;
					for (let i = 0; i < cList.length; i++) {
						this.option.data.push({
							label: cList[i].studentName,
							value: cList[i].studentId
						})
					}
				})
			},
			run(item) { //验证
				if (this.custom === "true") { //如果是游客
					if (this.freePowerRouter.indexOf(item.url) >= 0) { //免费页面
						this.$router.push(item.url)
					} else { //登陆页面
						this.tips = {
							visible: true,
							content: '该功能需要绑定宝宝后才可使用',
							url: '/addChildren',
							ok: '注册'
						}
					}
				} else { //如果不是游客
					if (this.access == 'kinsfolk' && this.payStatus.residue <= 0 && this.chargeRouter.indexOf(item.url) >= 0) { //家长未付费且点击的是付费页面
						this.tips = {
							visible: true,
							content: '该功能为付费功能，需缴费后才能使用',
							url: '/product',
							ok: '缴费'
						}
					} else { //已付费
						if (this.access == 'kinsfolk' && item.name == '人脸录入') { //家长
							this.$refs.selectFace.showSelect();
						} else { //园长教师
							if (item.name == '我的人脸') {
								this.$router.push({
									path: '/photograph',
									query: {
										id: '',
										loginType: this.access
									}
								})
							} else {
								this.$router.push(item.url)
							}
						}
					}
				}
			},
			handle(val) {

			},
			getWeek(val) {
				this.week = val;
			},
			getTeacherTime(val) {
				this.teacherSearchDay = val.join('-');
				this.fetchAdminTeacherStatics();
			},
			getTime(val, type) {
				this.searchTime = val.join('-');
				this.fetchAdminStudentStatics();
			},
			getKinsfolkTime(val, type) {
				this.kidTime = val.join('-');
				this.getKinsfolkStudentEnter();
				this.getKinsfolkStudentOut();
			},
			isShow(access) {
				return access.indexOf(this.access) !== -1;
			},
			fetchKinsfolkCamera() {
				this.$http.fetchKinsfolkCamera().then(resp => {
					this.cameraList = resp.data;
				})
			},
			fetchKinsfolkStudentTodayReport() {
				this.$http.fetchKinsfolkStudentTodayReport().then(resp => {
					this.reportList = resp.data;
				})
			},
			getKinsfolkStudentEnter() {
				this.$http.getKinsfolkHomeStatics({
					day: this.kidTime,
					direction: 0
				}).then(res => {
					this.enterList = res.data;
				})
			},
			getKinsfolkStudentOut() {
				this.$http.getKinsfolkHomeStatics({
					day: this.kidTime,
					direction: 1
				}).then(res => {
					this.outList = res.data;
				})
			},
			fetchKindergartenInfo() {
				this.$http.fetchKindergartenInfo().then(resp => {
					this.kindergartenInfo = resp.data;
				})
			},
			fetchAdminStudentStatics(type) {
				this.$http.fetchAdminStudentStatics({
					day: this.searchTime
				}).then(resp => {
					this.student = resp.data;
				})
			},
			fetchAdminTeacherStatics() {
				this.$http.fetchAdminTeacherStatics({
					day: this.teacherSearchDay
				}).then(resp => {
					this.teacher = resp.data;
				})
			},
			getPayStatus() {
				this.$http.getPayStatus().then(resp => {
					this.payStatus = resp.data;
				})
			},
			fetchTeacherStuReportStatics() {
				this.$http.fetchTeacherStuReportStatics().then(resp => {
					let data = resp.data;
					this.student.totalReport = data.reportStudent;
					this.student.notReport = data.notReportStudent;
				})
			},
			initFn() {
				let loginType = this.access;
				if (loginType === 'kinsfolk') {
					this.fetchKinsfolkStudentTodayReport();
					this.fetchKinsfolkCamera();
					this.getKinsfolkStudentEnter();
					this.getKinsfolkStudentOut();
					this.fetchKindergartenInfo();
					if (this.custom === 'false') {
						this.getStuInfo();
						this.getPayStatus();
					}
				} else if (loginType === 'kindergarten') {
					this.fetchAdminStudentStatics();
					this.fetchAdminTeacherStatics();
				} else {
					this.fetchTeacherStuReportStatics();
				}
			},
			checkPic(url) {
				if (!url) {
					return;
				}
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			getWxConfig() {
				let url = window.location.href;
				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['previewImage','updateTimelineShareData'] // 必填，需要使用的JS接口列表
					});
				})
			},
			fetchHomeNoticeRemind() {
				this.$http.fetchHomeNoticeRemind().then(resp => {
					for (let i = 0; i < resp.data.length; i++) {
						let data = resp.data[i];
						let key = data.module;
						this.remindList[key].list.push(data)
					}
				})
			},
			fetchHomeMenu() {
				this.$http.fetchHomeMenu({
					loginType: this.access
				}).then(resp => {
					for (let i = 0; i < resp.data.length; i += 8) {
						this.menus.push(resp.data.slice(i, i + 8))
					}
				})
			},
			getKindergartenNameAndLogo() {
				this.$http.getKindergartenNameAndLogo().then(resp => {
					this.kindergarten = resp.data;
				})
			},
			fetchTrendy() {
				this.$http.fetchTrendy({
					current: 1,
					size: 3
				}).then(resp => {
					this.list = resp.data.records;
				})
			},
			handlePraiseFn(item) {
				this.$http.handlePraiseFn(item).then(resp => {
					this.fetchTrendy();
				})
			},
			deleteTrends(id) {
				this.$toast.show('删除...', 'loading')
				this.$http.deleteTrendy({
					id: id
				}).then(resp => {
					this.$toast.hide();
					this.fetchTrendy();
				})
			},
			converFn(data) {
				this.$http.converTrendy(data).then(resp => {
					let black = data.black;
					if (black) {
						data.black = false;
					} else {
						data.black = true;
					}
				})
			},
		},
		watch: {
			menu() {
				this.initFn();
			}
		},
		mounted() {
			this.fetchHomeMenu();
			this.fetchHomeNoticeRemind();
			this.getKindergartenNameAndLogo();
			this.initFn();
			this.getWxConfig();
			this.fetchTrendy();
		}
	}
</script>

<style scoped>
	.home_block {
		color: #0D0D0D;
		width: 100%;
		background: #FFFFFF;
		padding: 1.5rem 1rem;
		margin-bottom: 1.5rem;
		box-sizing: border-box;
	}

	.kinsfolk-apply {
		height: 11rem;
	}

	.login_name {
		width: 100%;
		height: 4rem;
		font-size: 1.8rem;
	}

	.login_avater {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		background: #E5E5E5;
		margin-right: 1rem;
	}

	.new-apply {
		width: 90%;
		margin: auto;
		height: 4rem;
		padding: 1.2rem;
		box-sizing: border-box;
		color: #000000;
		font-size: 1.4rem;
		justify-content: left;
	}

	.new-apply img {
		width: auto;
		height: 2.8rem;
	}

	.new-icon {
		width: 2.8rem;
		height: 100%;
		margin-right: 1.5rem;
	}

	.new-badge {
		right: -1rem;
		top: -0.5rem;
	}

	.apply-text {
		width: calc(100% - 4.3rem);
		height: 100%;
		line-height: 2.8rem;
		color: rgba(16, 16, 16, 1);
	}

	.home_title {
		font-size: 1.6rem;
		border-left: 4px solid #36C12D;
		border-radius: 10px;
		width: 0;
		white-space: nowrap;
		text-indent: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
		margin-bottom: 1.5rem;
	}

	.home_menu {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		margin: 0 auto 0.5rem;
		font-size: 1.4rem
	}

	.home_menu img {
		width: 2rem;
		height: 2rem;
		margin-top: 1rem;
	}

	.situation-box {
		width: 100%;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.situation-titl {
		font-size: 1.8rem;
		width: 100%;
		padding: 0.5rem 0;
		background: #F7F7F7;
	}

	.situation-item {
		position: relative;
		border: 1px solid #2aa7e1;
		box-sizing: border-box;
		width: 100%;
		margin: 1.5rem 0;
		padding: 3rem 1rem 1rem 1rem;
	}

	.situation-item-notitl {
		padding: 1rem;
	}

	.situation-item span,
	.situation-item li {
		color: #2c3e50;
	}

	.situation-item-titl {
		position: absolute;
		top: -1.2rem;
		background: #2aa7e1;
		color: #fff;
		padding: 0 1rem;
	}

	.situation-item li {
		padding: 1rem;
		list-style: square;
		box-sizing: border-box;
	}

	.no-style {
		list-style: none !important;
	}

	.home-badge {
		margin-right: 1rem;
		display: none;
	}

	.no-style .home-badge {
		display: inline-block;
	}

	.msg-titl {
		line-height: 3.2rem;
	}

	.leave-name {
		width: 100%;
		margin: auto;
		flex-wrap: wrap;
	}

	.leave-name span {
		width: 25%;
		text-align: center;
		padding: 0.5rem 0;
	}

	.count-table td {
		padding: 0.5rem 0;
		font-size: 1.4rem;
	}

	.count-table tr {
		border-bottom: 1px solid #D9D9D9;
	}

	.index_title {
		font-size: 1.6rem;
	}

	.index_title img {
		margin-right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.num_item {
		margin-top: 1rem;
		flex-wrap: wrap;
	}

	.num_item_1 {
		margin: 0.5rem 0;
		width: 50%;
		font-size: 1.2rem;
	}

	.num_item_2 {
		margin: 0.5rem 0;
		width: 100%;
		font-size: 1.2rem;
		line-height: 2.2rem;
	}

	.num_p {
		padding-right: 2rem;
		line-height: 2.2rem;
	}

	.num_n {
		width: calc(100% - 2rem);
	}

	.icon_point {
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-right: 1rem;
		margin-top: 0.5rem;
	}

	.date_select {
		font-size: 1.4rem;
		margin: 1rem 0;
		justify-content: center;
	}

	.date_select img {
		height: 1.4rem;
		margin: 0 2rem;
	}

	.mychart {
		width: 100%;
		height: 250px;
	}

	.stu_td_1 {
		padding-bottom: 10px;
	}

	.stu_td_2 {
		border-top: 1px solid #ECECEC;
		padding-top: 10px;
	}

	.menu-handle {
		right: 1.5rem;
		top: 1.5rem;
		font-size: 1.4rem;
		line-height: 1;
		height: 1.4rem;
		color: #36C12D
	}

	.p_total {
		width: 45%;
		height: 10rem;
		box-sizing: border-box;
		padding-right: 4.4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 1.4rem;
		margin-top: 1rem;
	}

	.p_number {
		height: 5rem;
		line-height: 5rem;
		font-size: 2rem;
	}

	.p_number span {
		font-size: 3.6rem;
		color: #36C12D;
	}

	.p_total_photo {
		padding-right: 1rem;
		height: 12rem;
		font-size: 1.6rem;
	}

	.p_photo {
		margin: 0 auto 1rem;
		width: 9rem;
		height: 9rem;
		border-radius: 50%;
		overflow: hidden;
		background: #E8E8E8;
	}

	.p_video,
	.p_shl_photo {
		width: 100%;
		color: rgba(117, 117, 117, 1);
		justify-content: left;
	}

	.p_video>div {
		width: 10.8rem;
		height: 12rem;
		margin-right: 1.5rem;
	}

	.p_video .p_video_cover,
	.p_shl_photo_item {
		width: 100%;
		height: 10rem;
		margin-bottom: 0.5rem;
		background: #E8E8E8;
	}

	.p_shl_photo_item {
		margin-right: 1.5rem;
		width: 10.8rem;
		border-radius: 6px;
	}

	.p_video>div:last-child,
	.p_shl_photo_item:last-child {
		margin-right: 0;
	}

	.p_video_cover::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: url(../../../static/img/vplay.png) no-repeat center/3rem 3rem rgba(0, 0, 0, 0.4);
	}

	.p_title {
		height: 3rem;
		line-height: 3rem;
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	.p_title>div {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		text-align: center;
		margin-right: 1rem;
	}

	.p_title img {
		height: 1.8rem;
		width: 1.8rem;
		margin: 0.6rem auto;
	}

	.p_items {
		margin-top: 1rem;
		width: 55%;
		min-height: 10rem;
		border-left: 1px solid #dddddd;
		box-sizing: border-box;
		padding-left: 4.4rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.p_report {
		justify-content: space-between;
		align-items: flex-start;
		height: 12rem;
		font-size: 1.6rem;
	}

	.point_green,
	.point_red {
		position: relative;
		justify-content: space-between;
		line-height: 1.7rem;
		height: 1.7rem;
		font-size: 1.2rem;
		width: 100%;
	}

	.point_red {
		color: #FF6D3F;
	}

	.point_green::after,
	.point_red::after {
		content: '';
		position: absolute;
		left: -2rem;
		top: 0.25rem;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		background: #36C12D;
		color: #11ADFB;
	}

	.point_red::after {
		background: #FF6D3F;
	}

	.report {
		width: 100%;
		margin-top: 2rem;
	}

	.report .point_green {
		margin-left: 2rem;
	}

	.report>div {
		width: calc(50% - 4rem);
	}

	.shl-title {
		width: 11.8rem;
		height: 3rem;
		line-height: 3rem;
		border-radius: 25px;
		background-color: rgba(17, 173, 251, 1);
		border: 1px solid rgba(255, 255, 255, 0);
		color: #FFFFFF;
		font-size: 1.4rem;
		margin: 15px auto;
		font-weight: bold;
	}

	.weui-loadmore {
		width: 90%;
		margin-top: 5rem;
	}

	.daily {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 1.5rem;
	}

	.padding-15 {
		padding: 0 1.5rem;
		box-sizing: border-box;
	}

	.up-top {
		width: 100%;
		padding: 1.5rem 1.5rem 0 1.5rem;
		box-sizing: border-box;
	}

	.up-avatar,
	.up-name,
	.up-time {
		height: 4rem;
		line-height: 4rem;
	}

	.up-avatar {
		width: 4rem;
		border-radius: 50%;
		background: #e5e5e5;
		margin-right: 1rem;
	}

	.up-name {
		font-size: 1.6rem;
		color: rgba(0, 0, 0, 1);
	}

	.up-time {
		font-size: 1rem;
		color: rgba(98, 98, 98, 1);
	}

	.up-cont {
		margin: 1rem 0;
		font-size: 1.4rem;
		line-height: 2rem;
	}

	.up-img {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.up-img::after {
		content: '';
		width: 31%;
	}

	.up-img div {
		background: #e5e5e5;
		box-sizing: border-box;
		height: 12rem;
		margin-bottom: 1rem;
	}

	.up-img-1 div,
	.up-img-2 div,
	.up-img-4 div {
		width: 49%;
	}

	.up-img-3 div,
	.up-img-5 div,
	.up-img-6 div,
	.up-img-7 div,
	.up-img-8 div,
	.up-img-9 div {
		width: 31%;
	}

	.up-handle {
		justify-content: flex-end;
	}

	.icon {
		vertical-align: middle;
	}

	.up-handle>div {
		margin-left: 2rem;
	}

	.up-like,
	.up-like>div {
		position: relative;
		margin-top: 1rem;
	}

	.up-like::before {
		content: "";
		position: absolute;
		left: -1.5rem;
		width: calc(100% + 3rem);
		height: 1px;
		background: rgba(238, 238, 238, 1);
	}

	.up-like-p {
		width: calc(100% - 2.5rem);
		min-height: 2.2rem;
		color: rgba(89, 89, 89, 1);
		font-size: 1.2rem;
		line-height: 1.8rem;
		margin-bottom: 1rem;
	}

	.shl-info-cont {
		width: 100%;
		font-size: 1.4rem;
		line-height: 2rem;
		text-align: justify;
	}
</style>
